import React, {Component} from 'react';
import {Form, Input, InputNumber, Select, Spin} from "antd";
import Lng from "../common/lng";
import Service from "./Service";
import DishService from "../dish/Service";

class AddDishProcessForm extends Component {

    state = {
        process: {},
        loading: this.props.id != null,
        dishes: []
    }

    componentDidMount() {
        const self = this;
        if (this.props.id) {
            Service.getProcess(this.props.id, (data) => {
                self.setState({
                    process: data.data,
                    loading: false
                });
            });
        }

        DishService.allDishes((data) => {
            self.setState({
                dishes: data.data
            });
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            }
        };
        const {process, loading, dishes} = this.state;
        return (
            <Spin spinning={loading}>
                <Form>
                    <Form.Item className={"hide"}>
                        {getFieldDecorator('id', {
                            initialValue: process.id
                        })(
                            <Input className={"hide"}/>
                        )}
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishProcess.code")}
                    >
                        {getFieldDecorator('code', {
                            rules: [{
                                required: true,
                                message: Lng.get("common.placeholder", {some: Lng.get("dishProcess.code")})
                            }],
                            initialValue: process.code
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishProcess.comment")}
                    >
                        {getFieldDecorator('comment', {
                            rules: [{
                                required: true,
                                message: Lng.get("common.placeholder", {some: Lng.get("dishProcess.comment")})
                            }],
                            initialValue: process.comment
                        })(
                            <Input.TextArea></Input.TextArea>
                        )}
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishProcess.processTime")}
                    >
                        {getFieldDecorator('processTime', {
                            rules: [{
                                required: true,
                                message: Lng.get("common.placeholder", {some: Lng.get("dishProcess.processTime")})
                            }],
                            initialValue: process.processTime
                        })(
                            <InputNumber min={0} style={{width: 200}}/>
                        )}
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishProcess.processTimeUnit")}
                    >
                        {getFieldDecorator('processTimeUnit', {
                            rules: [{
                                required: true,
                                message: Lng.get("common.select", {some: Lng.get("dishProcess.processTimeUnit")})
                            }],
                            initialValue: process.processTimeUnit
                        })(
                            <Select style={{width: 200}}>
                                <Select.Option key={"".uuid()} value={"H"}>{Lng.get("common.H")}</Select.Option>
                                <Select.Option key={"".uuid()} value={"M"}>{Lng.get("common.M")}</Select.Option>
                                <Select.Option key={"".uuid()} value={"S"}>{Lng.get("common.S")}</Select.Option>
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dish.main")}
                    >
                        {getFieldDecorator('dishCode', {
                            rules: [{
                                required: true,
                                message: Lng.get("common.select", {some: Lng.get("dish.main")})
                            }],
                            initialValue: process.dishCode
                        })(
                            <Select style={{width: 200}}
                                    showSearch={true}
                                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                {
                                    dishes.map((d) => {
                                        return <Select.Option key={"".uuid()}
                                                              value={d.code}>{d.name}</Select.Option>
                                    })
                                }
                            </Select>
                        )}
                    </Form.Item>
                </Form>
            </Spin>
        )
    }

}

const _AddDishProcessForm = Form.create()(AddDishProcessForm);
export default _AddDishProcessForm;
